<template>
  <v-app id="inspire">
    <v-content>
      <v-container
        class="fill-height"
        fluid
      >
        <v-snackbar
          v-model="snackbar"
        >
          {{ text }}
          <v-btn
            color="pink"
            text
            @click="closeSnackbar"
          >
            Close
          </v-btn>
        </v-snackbar>
        <v-row
          align="center"
          justify="center"
        >
          <v-col
            cols="12"
            sm="8"
            md="8"
          >
            <v-card class="elevation-12">
              <v-toolbar
                color="primary"
                dark
                flat
              >
                <v-toolbar-title>Register form</v-toolbar-title>
                <v-spacer />
              </v-toolbar>
              <v-card-text>
                <v-form v-model="valid"
                        ref="form"
                >
                  <v-text-field
                    v-model="username"
                    :rules="userRules"
                    label="Username"
                    name="Username"
                    type="text"
                  />

                  <v-text-field
                    v-model="fullName"
                    :rules="nameRules"
                    :counter="10"
                    label="Full name"
                    required
                  ></v-text-field>

                  <v-text-field
                    v-model="password"
                    :rules="passwordRules"
                    id="password"
                    label="Password"
                    name="password"
                    type="password"
                  />
                  <v-text-field
                    v-model="confirmPassword"
                    :rules="confirmPasswordRules"
                    id="password"
                    label="Confirm Password"
                    name="confirm password"
                    type="password"
                  />

                  <v-text-field
                    v-model="email"
                    :rules="emailRules"
                    label="E-mail"
                    required
                  ></v-text-field>
                  <v-text-field
                    v-model="affiliation"
                    :rules="nameRules"
                    label="Affiliation"
                    name="Full Name"
                    type="text"
                  />

                  <v-text-field
                    v-model="region"
                    :rules="nameRules"
                    label="Region"
                    name="region"
                    type="text"
                  />

                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-spacer />
                <v-btn color="primary" @click="register(valid)">Register</v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
export default {
  props: {
    source: String
  },
  data () {
    return {
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /.+@.+/.test(v) || 'E-mail must be valid'
      ],

      userRules: [
        v => /^[a-zA-Z\-][a-zA-Z0-9_\-]*$/.test(v) || '只能包含字母，数字或两种特殊字符(-_)且只能以字母或-开头',
        v => !!v || 'Required',
        v => v.length <= 32 && v.length >= 5 || 'Must be between 5,32'
      ],
      nameRules: [
        v => !!v || 'Required',
        v => v.length <= 10 || 'Must be less than 10 characters'
      ],
      passwordRules: [
        v => !!v || 'Password Required',
        v => (/^[a-zA-Z0-9_\-]*$/.test(v) || /^.*[a-zA-z].*$/.test(v) || /^.*[0-9].*$/.test(v) || /^.*[_\-].*$/.test(v)) || '只能包含字母，数字或两种特殊字符(-_)'
      ],

      confirmPasswordRules: [
        v => !!v || 'Required',
        v => v === this.password || 'Must be identical as first input'
      ],
      valid: '',
      username: '',
      fullName: '',
      password: '',
      confirmPassword: '',
      email: '',
      affiliation: '',
      region: '',
      snackbar: false,
      text: ''

    }
  },
  methods: {
    validate () {
      this.$refs.form.validate()
    },
    closeSnackbar () {
      this.$router.push('/login')
    },
    register (formName) {
      if (this.$refs.form.validate()) {
        this.$axios.post('/register', { // axios.post (url, data)
          username: this.username,
          password: this.password,
          fullname: this.fullName,
          email: this.email,
          affiliation: this.affiliation,
          region: this.region
        })
          .then(resp => {
            // 根据后端的返回数据修改
            if (resp.status === 200 && resp.data.hasOwnProperty('id')) {
              // 跳转到login
              this.text = 'successful registration'
              this.snackbar = true
            } else {
              this.text = 'register error'
              this.snackbar = true
              // alert('register error')
            }
          })
          .catch(error => {
            console.log(error)
            this.text = '该用户名或邮箱已经被注册了'
            this.snackbar = true
            // alert('该用户名已经被注册了')
          })
      }
    }
  }
}
</script>
